<template> 
  <div class="app-container">
    <el-card class="filter-container" shadow="never">
      <div>
        <i class="el-icon-search"></i>
        <span>筛选搜索</span>
        <el-button style="float: right" @click="handleSearchList()" type="primary" size="s米糕">
          查询结果
        </el-button>
        <el-button style="float: right;margin-right: 15px" @click="handleResetSearch()" size="s米糕">
          重置
        </el-button>
      </div>
      <div style="margin-top: 15px">
        <el-form :inline="true" :model="listQuery" size="s米糕" label-width="140px">
          <el-form-item label="活动名称：">
            <el-input style="width: 203px" v-model="listQuery.activityName" placeholder="活动名称"></el-input>
          </el-form-item>
          <el-form-item label="证书持有者:">
            <el-input style="width: 203px" v-model="listQuery.userName" placeholder="证书持有者"></el-input>
          </el-form-item>
          <el-form-item label="获奖名称：">
            <el-input style="width: 203px" v-model="listQuery.nameOfAward" placeholder="获奖名称"></el-input>

          </el-form-item>

          <el-form-item label="选择颁证时间范围:">
            <el-date-picker placeholder="选择开始时间" start-placeholder="开始日期" end-placeholder="结束日期" align="right"
              type="datetimerange" format="yyyy-MM-dd HH:mm:ss" value-format="timestamp"
              v-model="listQuery.time"></el-date-picker>

          </el-form-item>

          


          <el-form-item label="状态：">
            <el-select v-model="listQuery.status" placeholder="全部" clearable>
              <el-option v-for="item in publishStatusOptions" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>

        </el-form>
      </div>
    </el-card>
    <el-card class="operate-container" shadow="never">
      <i class="el-icon-tickets"></i>
      <span>数据列表</span>
      <el-button class="btn-add" @click="handleAddProduct()" size="mini">
        添加
      </el-button>
    </el-card>
    <div class="table-container">
      <el-table ref="productTable" :data="list" style="width: 100%" @selection-change="handleSelectionChange"
        v-loading="listLoading" border>
        <el-table-column type="selection" width="60" align="center"></el-table-column>
        <el-table-column label="编号" width="100" align="center">
          <template slot-scope="scope">{{ scope.row.id }}</template>
        </el-table-column>
        <el-table-column label="活动名称" width="120" align="center">
          <template slot-scope="scope">
            <p>{{ scope.row.activityName }}</p>
          </template>
        </el-table-column>
        <el-table-column label="证书持有者" width="100" align="center">
          <template slot-scope="scope">
            <p>{{ scope.row.userName }}</p>
          </template>
        </el-table-column>
        <el-table-column label="获奖名称" width="120" align="center">
          <template slot-scope="scope">
            <p>{{ scope.row.nameOfAward }}</p>
          </template>
        </el-table-column>
        <el-table-column label="承办时间：" width="160" align="center">
          <template slot-scope="scope">
            <p>{{ (scope.row.undertakingTime) }}</p>
          </template>
        </el-table-column>
        <el-table-column label="承办场地" width="140" align="center">
          <template slot-scope="scope">
            <p>{{ scope.row.undertakingSite }}</p>
          </template>
        </el-table-column>

        <el-table-column label="主办单位" width="140" align="center">
          <template slot-scope="scope">
            <p>{{ scope.row.organizer }}</p>
          </template>
        </el-table-column>

        <el-table-column label="状态" width="140" align="center">
          <template slot-scope="scope">
            <el-switch @change="handlePublishStatusChange(scope.$index, scope.row)" :active-value="1"
              :inactive-value="0" v-model="scope.row.status">
            </el-switch>

          </template>
        </el-table-column>

        <el-table-column label="获取证书时间" width="160" align="center">
          <template slot-scope="scope">
            <p>{{ scope.row.createTime }}</p>
          </template>
        </el-table-column>

        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <p>
              <!-- <el-button size="mini" @click="handleShowProduct(scope.$index, scope.row)">查看
              </el-button> -->
              <el-button size="mini" @click="handleUpdateProduct(scope.$index, scope.row)">编辑
              </el-button>
              <el-button v-if="scope.row.mintStatus == 0" size="mini" @click="handleMint(scope.$index, scope.row)">铸造
              </el-button>
            </p>
            <p>

              <!-- <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除
              </el-button> -->
            </p>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="batch-operate-container">
      <el-select  size="s米糕" v-model="operateType" placeholder="批量操作">
        <el-option v-for="item in operates" :key="item.value" :label="item.label" :value="item.function">
        </el-option>
      </el-select>
      <el-button style="margin-left: 20px" class="search-button" @click="handleBatchOperate()" type="primary"
        size="s米糕">
        确定
      </el-button>
    </div>
    <div class="pagination-container">
      <el-pagination background
       @size-change="handleSizeChange" 
       @current-change="handleCurrentChange"
        layout="total,prev, pager, next,jumper" 
        :page-size="size" :total="total">
      </el-pagination>
    </div>
 
  </div>
</template>
<script>
import {
  updateDeleteStatus,
  updateNewStatus,
  updateRecommendStatus,
  updateHot
} from "../../../api/product"

import { FormatCreateTime } from "../../../filter/time"

import { OPERATION_STATUS_ARRAY, PUBLISH_STATUS_OPTIONS } from "../../../contanst/data"
import { list, listBySearch, mint, updateStatus } from "../../../api/cert"
import { Storage } from "../../../store/storage"
import { handleCurrentChange, handleSizeChange } from "../../../page/page"
import { DefaultListQuery } from "../../../entity/market"
import { handleSelectionChange } from "../../../checkbox/handler"
import { Message } from "element-ui"
export default {
  name: "productList",
  data() {
    return {
      editSkuInfo: {
        dialogVisible: false,
        productId: null,
        productSn: '',
        productAttributeCategoryId: null,
        stockList: [],
        productAttr: [],
        keyword: null
      },
      operates: OPERATION_STATUS_ARRAY,
      operateType: null,
      listQuery: Object.assign({}, DefaultListQuery),
      list: [],
      nftTypeId: 0,
      searchTreeProps: {},
      total: 0,
      size: 15,
      currentNftType: "",
      listLoading: true,
      dialogVisible: false,
      selectProductCateValue: null,
      multipleSelection: [],
      productCateOptions: [],
      brandOptions: [],
      publishStatusOptions: PUBLISH_STATUS_OPTIONS,
    }
  },

  components: {
  },


  created() {
    this.getList();
    // this.getBrandList();
  },
  watch: {
    selectProductCateValue: function (newValue) {
      if (newValue != null && newValue.length == 2) {
        this.listQuery.productCategoryId = newValue[1];
      } else {
        this.listQuery.productCategoryId = null;
      }

    },
    dialogVisible(val) {
      this.dialogVisible = val;
    }
  },


  methods: {

    // batchOnChange(value) {

    //   console.log("value", value);

    // },


    handleCurrentChange,
    handleSelectionChange,
    handleSizeChange,

    handleMint(index, row) {

      mint({id: [row.id]}).then(res => {

        Message({
          message: res.data.message,
            duration: 3 * 1000
        });

        this.list[index].mintStatus = 1;
      })
    },


    closeDialog(value) {
      console.log("value", value);

      this.$set(this, "dialogVisible", value);
    },
    /**
     * 树形菜单选择
     */
    currentChangeHandle(data) {
      this.currentNftType = data.label;
      this.nftTypeId = data.value;
      this.listQuery.nftType = data.value
    },

    getProductSkuSp(row, index) {
      let spData = JSON.parse(row.spData);
      if (spData != null && index < spData.length) {
        return spData[index].value;
      } else {
        return null;
      }
    },

    getResponse(response) {
      this.listLoading = false;
      this.list = response.data;
      this.list.forEach((item) => {
        item.undertakingTime = FormatCreateTime(item.undertakingTime);
        item.createTime = FormatCreateTime(item.createTime)
      });

      this.total = response.total;
      this.size = response.pageSize;
      Storage.marketnftByStorage(this.list);
    },

    getList() {
      this.listLoading = true;
      list(this.listQuery).then((r) => this.getResponse(r));
    },
    getBrandList() {
      fetchBrandList({ pageNum: 1, pageSize: 100 }).then(response => {
        this.brandOptions = [];
        let brandList = response.data.data;
        for (let i = 0; i < brandList.length; i++) {
          this.brandOptions.push({ label: brandList[i].name, value: brandList[i].id });
        }
      });
    },

    handleSearchList() {
      this.listQuery.pageNum = 1;
      this.getListBySearch();
    },

    getListBySearch() {

      listBySearch(this.listQuery).then(r => this.getResponse(r));
    },
    handleAddProduct() {
      this.$router.push({ path: '/certificate/addProduct' });
    },
    handleBatchOperate() {

      if (this.operateType == null) {
        this.$message({
          message: '请选择操作类型',
          type: 'warning',
          duration: 1000
        });
        return;
      }
      if (this.multipleSelection == null || this.multipleSelection.length < 1) {
        this.$message({
          message: '请选择要操作的证书',
          type: 'warning',
          duration: 1000
        });
        return;
      }
      this.$confirm('是否要进行该批量操作?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let ids = [];

        console.log(this.multipleSelection);
        let map = {};
        for (let i = 0; i < this.multipleSelection.length; i++) {
          map[this.multipleSelection[i].id] = this.multipleSelection[i];
          ids.push(this.multipleSelection[i].id);
        }

        this.operateType.call(ids).then(res => {

          for (let i = 0; i < this.list.length; i ++) {
            if (map[ this.list[i].id]) {
              this.list[i][this.operateType.key] =  this.operateType.value;
            }
          }
        });
       
      });
    },


    handlePublishStatusChange(index, row) {
      let ids = [];
      ids.push(row.id);
      this.updatePublishStatus(row.status, ids);
    },
    handleNewStatusChange(index, row) {
      let ids = [];
      ids.push(row.mid);
      updateHot(row.hot, ids);
    },
    handleRecommendStatusChange(index, row) {
      let ids = [];
      ids.push(row.id);
      this.updateRecommendStatus(row.recommandStatus, ids);
    },
    handleResetSearch() {
      this.selectProductCateValue = [];
      this.listQuery = Object.assign({}, this.defaultListQuery);
      this.listQuery.pageNum = 1;
      this.getList()
    },
    handleDelete(index, row) {
      this.$confirm('是否要进行删除操作?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let ids = [];
        ids.push(row.id);
        this.updateDeleteStatus(1, ids);
      });
    },
    handleUpdateProduct(index, row) {
      this.$router.push({ path: '/certificate/updateProduct', query: { id: row.id } });
    },
    handleShowProduct(index, row) {
      this.dialogVisible = true;
      console.log(row);
      this.$refs.listByProductDetails.pullData(row.mid);
    },
    handleShowVerifyDetail(index, row) {
      console.log("handleShowVerifyDetail", row);
    },
    handleShowLog(index, row) {
      console.log("handleShowLog", row);
    },
    updatePublishStatus(publishStatus, ids) {
      let params = {
        ids: ids,
        status: publishStatus
      };
      updateStatus(params).then(response => {
        this.$message({
          message: '修改成功',
          type: 'success',
          duration: 1000
        });
      });
    },
    updateNewStatus(newStatus, ids) {
      let params = new URLSearchParams();
      params.append('ids', ids);
      params.append('newStatus', newStatus);
      updateNewStatus(params).then(response => {
        this.$message({
          message: '修改成功',
          type: 'success',
          duration: 1000
        });
      });
    },
    updateRecommendStatus(recommendStatus, ids) {
      let params = new URLSearchParams();
      params.append('ids', ids);
      params.append('recommendStatus', recommendStatus);
      updateRecommendStatus(params).then(response => {
        this.$message({
          message: '修改成功',
          type: 'success',
          duration: 1000
        });
      });
    },
    updateDeleteStatus(deleteStatus, ids) {
      let params = new URLSearchParams();
      params.append('ids', ids);
      params.append('deleteStatus', deleteStatus);
      updateDeleteStatus(params).then(response => {
        this.$message({
          message: '删除成功',
          type: 'success',
          duration: 1000
        });
      });
      this.getList();
    }
  }
}
</script>
<style>

</style>


